<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>模板内容</span>
        </div>
      </template>

      <!-- 搜索 -->
      <div>
        <el-form inline>
          <el-form-item label="用户编号">
            <el-input v-model="searchForm.userId" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="模板类型">
            <el-select v-model="searchForm.type">
              <el-option label="系统通知" :value="1"></el-option>
              <el-option label="消息公告" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否已读">
            <el-select v-model="searchForm.isRead">
              <el-option label="已读" :value="1"></el-option>
              <el-option label="未读" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              type="datetimerange"
              v-model="searchForm.createTime"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div
          style="
            width: 100%;
            padding-bottom: 20px;
            display: flex;
            justify-content: flex-end;
          "
        >
          <el-button type="primary" @click="searchSubmit">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>

      <VTable :tableData="tableData" :options="options">
        <template #menubtn> </template>

        <template #operate="scope">
          <el-button
            size="small"
            link
            type="primary"
            :icon="View"
            @click="handleDetail(scope.row)"
            >查看</el-button
          ></template
        >
      </VTable>

      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        style="width: 600px"
        @close="resetForm"
      >
        <!-- 详情 -->
        <Description
          v-if="actionType === '查看'"
          :options="options"
          :dataItem="dataItem"
        ></Description>

        <template #footer>
          <el-button v-if="actionType === '查看'" @click="dialogVisible = false"
            >关闭</el-button
          >
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import VTable from "../../components/VTable/index.vue";
import Description from "../../components/Description/index.vue";
import {
  getInfoLogList,
  addInfoLog,
  searchInfoLog,
} from "../../api/infoManage/index";
import type { FormInstance, FormRules } from "element-plus";
import { getUserList, searchUser } from "../../api/userManage/index";
import { Delete, Edit, View, Plus, List } from "@element-plus/icons-vue";
import { getInfoTemp } from "../../api/infoManage";

const tableData = ref<any>([]);
const options = [
  {
    prop: "userId",
    label: "用户编号",
    isTable: true,
  },
  {
    prop: "position",
    label: "用户类型",
    isTable: true,
    width: 100,
  },
  {
    prop: "username",
    label: "发送人名称",
    isTable: true,
  },
  {
    prop: "content",
    label: "模板内容",
    isTable: true,
    width: 300,
  },
  {
    prop: "type",
    label: "模板类型",
    isTable: true,
    type: "info",
  },
  {
    prop: "isRead",
    label: "是否已读",
    isTable: true,
  },
  {
    prop: "readTime",
    label: "阅读时间",
    isTable: true,
    type: "time",
    width: 200,
  },
  {
    prop: "createTime",
    label: "创建时间",
    isTable: true,
    type: "time",
    width: 200,
  },
];
const filterOptions = options.filter((item) => item.isForm == true);

const dialogTitle = ref("查看"); // 弹出层标题
const dialogVisible = ref<boolean>(false);
const actionType = ref(""); // 操作按钮的类型
const setDialogTile = (type: string) => {
  dialogTitle.value = type;
  actionType.value = type;
  dialogVisible.value = true;
};

//详情
const dataItem = ref<object>({});
const handleDetail = (scope: any) => {
  dataItem.value = scope;
  setDialogTile("查看");
  console.log("查看", dataItem.value);
};

//关闭
const resetForm = () => {
  dialogVisible.value = false;
};
const onLoad = async () => {
  const res = await getInfoLogList();
  tableData.value = res.data.data;
};

onMounted(async () => {
  await onLoad();
});

//搜索
const searchForm = ref<any>({
  userId: "",
  type: "",
  isRead: "",
  createTime: Date,
});
//搜索
const searchSubmit = async () => {
  const res = await searchInfoLog(searchForm.value);
  tableData.value = res.data.data;
};
//重置搜索
const resetSearch = async () => {
  searchForm.value = {
    userId: "",
    type: "",
    isRead: "",
    createTime: Date,
  };
  await onLoad();
};
</script>

<style lang="scss" scoped></style>
